<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <style>
        html,
        body {
            background: none;
        }

        .js-prp {
            /* display: none; */
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        .evaluate {
            position: absolute;
            left: calc(20% - 10px);
            top: calc(50% - 210px);
            background: #fff;
            padding: 0 10px;
            width: 60%;
            border-radius: 7px;
        }

        .evaluate .hd {
            position: relative;
            padding: 40px 0 0;
            text-align: center;
        }

        .evaluate .title {
            padding: 28px 0 22px;
            position: relative;
        }

        .evaluate .br {
            border-bottom: 1px solid #ccc;
            margin: 6px 0;
        }

        .evaluate .br_title {
            font-size: 12px;
            background: #fff;
            position: absolute;
            top: 26px;
            width: 8em;
            left: calc(50% - 4em);
        }

        /* .evaluate .hd_img{
            width: 74px;
            height: 74px;
            border-radius: 50%;
            position: absolute;
            top: -37px;
            left: calc(50% - 37px);
        } */
        .evaluate .close_img {
            width: 18px;
            height: 18px;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .evaluate .ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            border-bottom: 1px solid #ccc;
        }

        .evaluate .li {
            font-size: 14px;
            text-align: center;
            margin: 0 4px 12px;
        }

        .evaluate .li .pj {
            color: #fff;
            width: 4em;
            line-height: 2;
            border-radius: 5px;
            font-size: 14px;
            margin-bottom: 6px;
            background: #ccc;
        }

        .evaluate .li .hot {
            background: #7f5ebfd6;
        }

        .evaluate .ft {
            padding: 16px 10px 14px;
        }

        .evaluate .ft .nmpj {
            font-size: 15px;
            /* background: rgba(127, 94, 191, 0.84); */
            background: #F46CEF;
            color: #fff;
            text-align: center;
            line-height: 3;
            border-radius: 6px;
            box-shadow: 0 5px 5px #ccc;
        }

        .evaluate .ft .ju_bao {
            font-size: 12px;
            color: #ea5d5d;
            padding-top: 14px;
            text-align: center;
        }

        .js-more {
            margin: 0 10px 0 14px;
        }

        .js-openMore {
            display: none;
            position: absolute;
            bottom: 0;
            z-index: 1000;
            width: 100%;
            background: #fff;
            font-size: 16px;
        }

        .js-openMore .p {
            border-top: 1px solid;
            padding: 1em;
            font-size: 14px;
        }

        .js-openMore .h3 {
            padding: 1em;
            text-align: center;
        }

        .img_auth2 {
            position: fixed;
            top: 214px;
            height: calc(100% - 260px);
            width: 100%;
            background: #f1f1f1;
            z-index: 100;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
            color: #797878;
        }

        .img_auth2 .btn {
            font-size: 15px;
            line-height: 2.6;
            border: 1px solid;
            padding: 0 3em;
            border-radius: 6px;
            color: #481877;
            margin-top: 2em;
        }

        .evaluate .li .pj.evaluate_bg {
            background: #ba9fe8;
        }

        .evaluate .li .pj.current {
            background: #F46CEF;
        }

        .tx {
            width: 50px;
            height: 50px;
            border-radius: 7px;
            overflow: hidden;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            top: -1.9rem;
            left: calc(50% - 25px);
            margin-right: 0;
        }

        .tx img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <!-- <section class="js-prp">
            <article class="evaluate">
                <div class="hd">
                    <div class="tx img-h">
                        <img class="hd_img" src="../../image/test/01.jpg">
                    </div>
                    <img class="close_img" src="../../image/x.png" />
                    <p>张三</p>
                    <div class="title">
                        <p class="br"></p>
                        <p class="br_title">TA的真实评价</p>
                    </div>
                </div>
                <ul class="ul">
                    <li class="li js-pj">
                        <span class="pj evaluate_bg">有趣</span>
                        <p>1</p>
                    </li>
                    <li class="li js-pj">
                        <span class="pj evaluate_bg">有趣</span>
                        <p>1</p>
                    </li>
                    <li class="li js-pj">
                        <span class="pj ">有趣</span>
                        <p>1</p>
                    </li>
                </ul>
                <div class="ft">
                    <div class="nmpj" onclick="pushEva()">匿名评价</div>
                    <p class="ju_bao" onclick="juBao()">严重问题请举报</p>
                </div>
            </article>
        </section> -->
        <section class="js-prp">
            <article class="evaluate">
                <div class="hd">
                    <div class="tx img-h">
                        <img :src="returnImg(ffInfo.head_portrait)"
                            onerror="this.src='../../image/touxiang.png'">
                    </div>
                    <img tapmode onclick="api.closeFrame();" class="close_img" src="../../image/x.png" />
                    <p>{{ ffInfo.name }}</p>
                    <div class="title">
                        <p class="br"></p>
                        <p class="br_title">TA的真实评价</p>
                    </div>
                </div>
                <ul class="ul">
                    <li class="li js-pj" v-for="(item, index) in ffList">
                        <span class="pj" :class="{'evaluate_bg':item.num > 0, 'current':item.select==1}"
                            @click="greet(item.id, index)">{{item.content}}</span>
                        <p>{{item.num}}</p>
                    </li>
                </ul>
                <div class="ft" v-if="uid != myuid">
                    <div class="nmpj" onclick="sendPj()">匿名评价</div>
                    <p class="ju_bao" @click="_url({url:'frame0/ju_bao_frame', title:'举报', uid:uid})">严重问题请举报</p>
                </div>
            </article>
        </section>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>

<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            uid: 0,
            pjStr: {}, // 评价id
            myuid: $api.getStorage('userid')
        },
        methods: {
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
            
            // 评价选择
            greet(id, index) {
                var _this = this;
                if (_this.uid == _this.myuid) {
                    _msg('不能对自己评价');
                    return;
                }
                // 判断是否有评价权限
                _ajax('Home/Dymanic/checkeva', function (ret, err) {
                    console.log(JSON.stringify(ret));
                    console.log(JSON.stringify(err));
                    if (ret && ret.code == 200) {

                        var status = _this.ffList[index].select;
                        _this.ffList[index].select = status == 0 ? 1 : 0;
                        _this.ffList[index].num = status == 0 ? parseInt(_this.ffList[index].num) +
                            1 : _this.ffList[index].num - 1;
                        _this.pjStr[id] = _this.ffList[index].select;

                    } else {
                        _msg(ret.msg);
                    }
                }, {
                    user_id: $api.getStorage('userid'),
                    main_id: _this.uid,
                })
            }

        }
    })
    apiready = function () {
        view.uid = api.pageParam['uid'] || $api.getStorage('userid');

        getOtherInfo();
        getPj();
    }
    // 获取用户信息
    function getOtherInfo() {
        _getUser(function (ret) {
            console.log(JSON.stringify(ret))
            view.ffInfo = ret.result;
        }, view.uid)
    }

    // 获取评价列表
    function getPj() {
        _ajax('Home/Dymanic/evalist', function (ret, err) {
            console.log(JSON.stringify(ret));
            console.log(JSON.stringify(err));
            if (ret && ret.code == 200) {
                view.ffList = ret.data;
                for (var i = 0, len = ret.data.length; i < len; i++) {
                    view.ffList[i].select = 0;
                }
            }
        }, {
            main_id: view.uid,
        })
    }

    // 匿名评价
    function sendPj() {
        var str = [];
        for (var k in view.pjStr) {
            if (view.pjStr[k] == 1) {
                str.push(k);
            }
        }
        console.log(JSON.stringify(str))
        if (str.length == 0) {
            _msg('评价选项不能为空');
            return;
        }
        _ajax('Home/Dymanic/evaluate', function (ret, err) {
            console.log(JSON.stringify(ret));
            console.log(JSON.stringify(err));
            _msg(ret.msg);
            if (ret.code == 200) {
                pushMsg(view.uid);
                api.closeFrame();
            }
        }, {
            userid: $api.getStorage('userid'),
            main_id: view.uid,
            evaluate: JSON.stringify(str),
        })
    }
</script>

</html>